<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/appraise'">
            <div class="vs-search-box" style="padding: 24px 22px;">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="门店：">
                        <el-select style="width:200px" v-model="paging.store_id" placeholder="">
                            <el-option  v-for="(ele,index) in storeList" :key="index" :label="ele.title" :value="ele.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="评价时间：">
                        <el-date-picker v-model="paging.start_time" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="评价ID：">
                        <el-input style="width:200px" v-model="paging.comment_id"></el-input>
                    </el-form-item>
                    <el-form-item label="" style="float: right;margin-right:0;">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="评价商品：">
                        <el-input style="width:200px" v-model="paging.title"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float" style="display: flex;justify-content: flex-end;"> -->
                <!-- <div class="title-left"> 分销列表 </div> -->
                <!-- <el-button icon="el-icon-plus" @click="dialogVisible=true" style="margin-left:auto;" type="primary">新增</el-button> -->
                <!-- <el-button icon="el-icon-download">导出</el-button> -->
                <!-- </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column prop="id" label="ID"  width="100"></el-table-column>
                    <el-table-column prop="store.title" label="门店"> </el-table-column>
                    <el-table-column prop="create_time" label="评价时间" width="160"> </el-table-column>
                    <el-table-column prop="user.username" label="评价用户名" min-width="100"> </el-table-column>
                    <el-table-column prop="ordersGoods.goods_name" label="评价商品" min-width="150"> </el-table-column>
                    <el-table-column prop="content" label="评价内容" min-width="200"> </el-table-column>
                    <el-table-column fixed="right" min-width="160" label="操作">
                        <template slot-scope="scope">
                            <div class="vs-no-lihe">
                                <span @click="utils.goUrl('/appraiseInfo?id='+scope.row.id)" class="tab-hui-text">查看</span>
                                <span v-if="scope.row.status==0" @click="setRow(2,scope.row)" class="tab-table-text">显示</span>
                                <span v-else @click="conceal(scope.row)" class="tab-red-text">隐藏</span>
                                <span v-if="scope.row.is_top==1" @click="setRow(4,scope.row)" class="tab-red-text">取消置顶</span>
                                <span v-else @click="setRow(3,scope.row)" class="tab-table-text">置顶</span>
                                <span v-if="!scope.row.reply_content" @click="setRow(5,scope.row)" class="tab-table-text">一键回复</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="分销记录" :visible.sync="isInfo">
            <!-- width="570px" -->
            <el-table :data="recordList" v-loading="loading2" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="company.title" label="公司名称"> </el-table-column>
                <el-table-column prop="create_time" label="邀请时间"> </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>

        <oneReply @reply="reply" :oneReplyShow.sync="oneReplyShow"></oneReply>
    </div>
</template>

<script>
import oneReply from "../../components/oneReply.vue";
export default {
    components: {
        oneReply
    },
    data() {
        return {
            oneReplyShow: false,
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            replyId:'',
            paging: {
                title: '',//姓名
                start_time: '',//开始时间
                end_time: '',//结束时间
                store_id:'',
                comment_id:'',
                page: 1,
                total: 0,
                limit: 10,
            },
            storeList:[],
            form: {
                date: "",
            },
            tableData: []
        };
    },
    created() {
        if (this.$route.path == '/appraise') {
            this.getAllStore();
            this.handleCurrentChange(1);
        }
    },
    methods: {
         //  获取所有门店
        async getAllStore(){
            let {code,data} = await this.$Http.getAllStore();
            if(code){
                this.storeList = data;
            }
        },
        async reply(e){
            let {code,data} = await this.$Http.setGoodsComment({
                id: this.replyId,
                reply_content:e
            });
            if(code){
                this.$message.success('回复成功!')
                this.oneReplyShow = false;
                this.repairGetList()
            }
        },
        conceal(row){
            this.$msgbox({
                title: '提示',
                message: '确定要隐藏该评论吗?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose:async (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.changeComment({
                            id:row.id,
                            field:'status',
                            value:0
                        });
                        if(code){
                            this.$message.success('隐藏成功!')
                            this.handleCurrentChange(1)
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                }
            }).then(action => {

            }).catch(()=>{});
        },
        async setRow(type, row) {
            let field,value,message;
            if(type==5){
                this.oneReplyShow = true;
                this.replyId = row.id;
                return;
            }else if(type==2){
                value = 1;
                field = 'status';
                message = '评论显示';
            }else if(type==3){
                value = 1;
                field = 'is_top';
                message = '置顶成功!';
            }else if(type==4){
                value = 0;
                field = 'is_top';
                message = '取消置顶成功!';
            }
            let {code,data} = await this.$Http.changeComment({
                id:row.id,
                field,value
            });
            if(code){
                this.$message.success(message);
                this.repairGetList()
            }
            return;
            if (type == 1) {
                this.dialogVisible = true;
                setTimeout(() => {
                    this.ruleForm = Object.assign({}, row);
                }, 200);
            } else if (type == 2) {
                this.isInfo = true;
                this.loading2 = true;
                let { code, data } = await this.$Http.catdistribution({
                    id: row.id
                })
                this.loading2 = false;
                if (code) {
                    this.recordList = data;
                } else this.recordList = [];
            }
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let obj = {...this.paging};
            if(obj.start_time){
                obj.end_time = obj.start_time[1] /1000;
                obj.start_time = obj.start_time[0] /1000;
            }else obj.end_time = ""
            let { code, data } = await this.$Http.getComment(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>